<template>
	<u-popup :show="localVisible" mode="center" round="16" :customStyle="{ width: '86%', maxHeight: '80vh' }"
		@close="handleClose" >
		<view class="popup-container">
			<!-- 关闭按钮 -->
			<view class="close-btn" @tap="handleClose">
				<u-icon name="close" color="#999" size="22"></u-icon>
			</view>

			<!-- 内容区域 -->
			<scroll-view scroll-y class="content-scroll">
				<!-- 头部信息 -->
				<view class="header">
					<!-- <u--image 
            :src="materialData.image || '/static/default-material.png'" 
            width="100%"
            height="180px"
            radius="8"
            mode="aspectFill"
          ></u--image> -->
					<view class="title">{{ materialData.name || '未命名物料' }}</view>
					<!-- <view class="subtitle">{{ materialData.code || '无编码' }}</view> -->
				</view>

				<!-- 详细信息 -->
				<view class="detail-section">
					<view class="section-title">物料详情</view>
					<u-cell-group :border="false">
						<u-cell v-for="(item, key) in materialDetails" :key="key" :title="item.label"
							:value="item.value" :titleStyle="{ color: '#666', fontSize: '14px' }"
							:valueStyle="{ color: '#333', fontWeight: '500' }"></u-cell>
					</u-cell-group>
				</view>

				<!-- 底部操作 -->
				<view class="footer">
					<u-button text="关闭" type="primary" plain customStyle="margin-top: 20px;"
						@click="handleClose"></u-button>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			// 控制弹窗显示
			visible: false,
			// 物料数据对象
			materialData: {}
		},
		data(){
			return {
				// 本地状态管理，避免直接修改 prop
				localVisible: this.visible,
			
			}
		},
		
		watch: {
			visible: {
			      immediate: true,
			      handler(newVal) {
			        console.log('弹窗可见状态变化:', newVal);
			        this.localVisible = newVal;
			      }
			    },

		},
		mounted() {
			console.log('弹窗组件已挂载', this.visible)
		},


		computed: {
			// 格式化显示数据
			materialDetails() {
				return [{
						label: '规格',
						value: this.materialData.partsSpec || '-'
					},
					{
						label: '单价',
						value: this.materialData.partsPrice || '-'
					},
					{
						label: '验收标准',
						value: this.materialData.partsAccStand || '-'
					}
					// { label: '仓库位置', value: this.materialData.location || '-' },
					// { label: '供应商', value: this.materialData.supplier || '-' },
					// { label: '最近更新', value: this.materialData.updateTime || '-' }
				]
			}
		},

		methods: {
			handleClose() {
				// 关闭时更新本地状态
				this.localVisible = false;
				this.$emit('update:visible', false)
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-container {
		position: relative;
		padding: 30rpx;
		background: #fff;
		border-radius: 16px;
		overflow: hidden;

		.close-btn {
			position: absolute;
			top: 16rpx;
			right: 16rpx;
			z-index: 10;
			padding: 16rpx;
		}

		.content-scroll {
			max-height: 70vh;
		}

		.header {
			text-align: center;
			margin-bottom: 30rpx;

			.title {
				font-size: 20px;
				font-weight: bold;
				margin: 20rpx 0 10rpx;
				color: #333;
			}

			.subtitle {
				font-size: 14px;
				color: #999;
			}
		}

		.detail-section {
			margin-top: 20rpx;

			.section-title {
				font-size: 16px;
				font-weight: bold;
				padding: 16rpx 0;
				border-bottom: 1px solid #f5f5f5;
				margin-bottom: 10rpx;
				color: #333;
			}
		}

		.footer {
			padding: 20rpx 0 10rpx;
		}
	}
</style>